import { memo, useEffect, useMemo, useRef } from "react"
import styles from './styles.module.less'
import { useAppSelector } from "@/utils/hooks";
import AppBox from "../../components/AppBox";
import Widget from "@/Widgets/Widget";


/**
 * 图标列表
 * @returns Page
 */
const Page = () => {
  const {
    appConfig,
    off: {
      isPc,
    }
  } = useAppSelector((state) => state);

  const {
    page: {
      currentPage,
      boxs
    },
    box
  } = appConfig

  const olRef = useRef<HTMLOListElement>(null)

  const boxList: any[] = (boxs as any)[currentPage]?.list || []

  let gridTemplateRowsNum = 3
  let total = boxList.length
  let rowNum = Math.floor(total / 8)
  gridTemplateRowsNum = rowNum + 6

  let gridTemplate = isPc ? {
    gridTemplateColumns: `repeat(auto-fill, ${box.size}px`,
    gridTemplateRows: `repeat(${gridTemplateRowsNum}, ${box.size}px`,
  } : {
    gridTemplateColumns: `repeat(4, calc((100vw - ${24 * 5}px) / 4))`,
    gridTemplateRows: `repeat(${gridTemplateRowsNum}, calc((100vw - ${24 * 5}px) / 4))`,
  }

  return (
    <div className={styles.Page}>
      <ol
        ref={olRef}
        className={styles.content}
        style={{
          ...gridTemplate
        }}
      >
        {boxList.map((boxItem, index) => {
          if (boxItem?.type === 'website') {
            return (
              <AppBox key={index} positionIndex={index} {...boxItem} />
            )
          } else {
            return (
              <Widget key={index} {...boxItem} />
            )
          }
        })}
      </ol>
    </div>
  )
}

export default Page